<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>6</title>
        <link rel="stylesheet"
            href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
        <script
            src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
    </head>
    <body class="container">
        <h3 class="mb-4">设置旋转器的大小</h3>
        <div class="spinner-border" style="width:3rem;height:3rem"></div>
        <div class="spinner-grow ml-5 text-dark" style="width:3rem;height:3rem"></div><hr>
        <div class="spinner-border spinner-border-sm text-info"></div>
        <div class="spinner-grow spinner-grow-sm ml-5 text-success"></div>
        <hr>

        <div class="d-flex align-items-center">
            <div class="spinner-border ml-auto" style="width:3rem;height:3rem"></div>
            <div class="spinner-grow ml-5 text-dark"
                style="width:3rem;height:3rem"></div>
        </div><hr>
        <div class="d-flex align-items-center">
            <div class="spinner-border spinner-border-sm text-info ml-auto"></div>
            <div class="spinner-grow spinner-grow-sm ml-5 text-success "></div>
        </div>

        <hr>
        <div class="clearfix">
            <div class="spinner-grow ml-5 float-right text-dark"
                style="width:3rem;height:3rem">
                <div class="spinner-border float-right"
                    style="width:3rem;height:3rem "></div>
            </div>
            <hr>
            <div class="clearfix">
                <div class="spinner-grow spinner-grow-sm ml-5 text-success
                    float-right"></div>
                <div class="spinner-border spinner-border-sm text-info
                    float-right"></div>

            </div><hr>
            <div class="text-right">

                <div class="spinner-border " style="width:3rem;height:3rem "></div>
                <div class="spinner-grow ml-5 text-dark"
                    style="width:3rem;height:3rem"></div>
            </div>
            <hr>
            <div class="text-right">

                <div class="spinner-border spinner-border-sm text-info "></div><div
                    class="spinner-grow spinner-grow-sm ml-5 text-success "></div>
            </div>
            <h3 class="mb-4">旋转器按钮</h3>
            <button class="btn btn-white btn-outline-primary" type="button"
                disabled>
                <span class="spinner-border spinner-border-lg"></span>Loading...
            </button>
        </div>
    </body>
</html>